<template>
	<m-layout barBg="unset" gap="0 24" title="收款码" color="#ffffff" scrollColor="#30c64f">
		<m-block class="codeBox flex-column" style=" align-items: center;">
			<text class="ta-center mt-48 mb-24">请扫码支付</text>
			<view class="qrcode-box flex jc-center ai-center">
				<view class="flex ai-center jc-center">
					<u-qrcode ref="qrcode" size="260" canvas-id="qrcode" :value="shareUrl" />
				</view>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { invUrl } from '@/common/baseconfig.js';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
			shareUrl() {
				// return invUrl + 'pages/login/register-onepage/register-onepage?invcode=' + this.userinfo.invcode;
				return invUrl + 'pages/login/register/register?invcode=' + this.userinfo.invcode;
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: url('../../../static/images/pages/mine/merchantCode/star.png') no-repeat,
			url('../../../static/images/pages/mine/merchantCode/merchantBg.png') no-repeat;
		background-size: 100% 384rpx, 100% 100%;
		background-color: #F6F6F6;
	}

	.codeBox {
		margin-top: 290rpx !important;
		background: url('../../../static/images/pages/mine/merchantCode/codeBg.png') no-repeat;
		width: 702rpx;
		height: 900rpx;
		background-size: 100% 100%;

		.qrcode-box {
			width: 560rpx;
			height: 560rpx;
			display: inline-block;
			background: linear-gradient(128deg, #4BD168, #4BD168);
			border-radius: 6rpx;
			padding: 20rpx;

			&>view {
				background-color: #fff;
				height: 100%;
				width: 100%;
			}

			::v-deep .uqrcode-canvas-wrapper {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>